<template>
  <div class="app-container">
    <div class="block">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="listQuery.name" size="mini" placeholder="请输入消息名称" />
        </el-col>
        <el-col :span="6">
          <el-button type="success" size="mini" icon="el-icon-search" @click.native="search">{{
            $t('button.search')
          }}</el-button>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click.native="reset">{{
            $t('button.reset')
          }}</el-button>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <!-- <el-col :span="24">
          <el-button v-permission="['/msgReminder/add']" type="success" size="mini" icon="el-icon-plus"
            @click.native="add">{{ $t('button.add') }}</el-button>
        </el-col> -->
        <el-col :span="24">
          <el-button v-permission="['/dingDing/setting']" type="primary" size="mini" icon="el-icon-plus"
            @click.native="settingFrom">{{
              $t('button.dingDingSetting')
            }}</el-button>
          <el-button v-permission="['/dingDing/add']" type="success" size="mini" icon="el-icon-plus"
            @click.native="add">{{
              $t('button.add')
            }}</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="listLoading" :header-cell-style="{ background: '#f5f5f7' }" :data="list" element-loading-text="Loading" border fit highlight-current-row
      @current-change="handleCurrentChange">
      <el-table-column prop="name" label="模板名称" :width="flexWidth('name', list, '结算金额')">
      </el-table-column>
      <el-table-column prop="userId_List" label="钉钉账号" :width="flexWidth('userId_List', list, '结算金额')">
      </el-table-column>
      <el-table-column prop="title" label="模板内容" :width="flexWidth('title', list, '结算金额')">
      </el-table-column>
      <el-table-column prop="content" label="模板内容" :width="flexWidth('content', list, '结算金额')">
      </el-table-column>

      <el-table-column prop="description" label="备注" :width="flexWidth('description', list, '结算金额')">

      </el-table-column>

      <el-table-column fixed="right" label="操作" width="240" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-permission="['/dingDing/edit']" type="primary" size="mini" icon="el-icon-edit"
            @click="edit(row)">{{ $t('button.edit') }}</el-button>
          <el-button v-permission="['/dingDing/delete']" type="danger" size="mini" icon="el-icon-delete"
            @click.native="remove(row)">{{ $t('button.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 500]"
      :page-size="listQuery.pageSize" :total="total" @size-change="changeSize" @current-change="fetchPage"
      @prev-click="fetchPrev" @next-click="fetchNext" />

    <el-dialog :title="settingFormTitle" :visible.sync="settingFormVisible" width="70%">
      <el-form ref="settingForm" :model="settingForm" :rules="settingFormRules" label-width="160px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业appkey" prop="appkey">
              <el-input v-model="settingForm.appkey" minlength="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业appsecret" prop="appsecret">
              <el-input v-model="settingForm.appsecret" minlength="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应用agent_id" prop="agent_id">
              <el-input v-model="settingForm.agent_id" minlength="1" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="默认时间秒" prop="defaultTimer">
              <el-input v-model="settingForm.defaultTimer" minlength="1" />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="定时器间隔时间(秒)" prop="defaultTimerInterval">
              <!-- <el-input v-model="settingForm.defaultTimerInterval" minlength="1" /> -->
              <el-input v-model="settingForm.defaultTimerInterval" oninput="if(isNaN(value)) {
                   value = null }
                 if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+0)}" >
                  
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="description">
              <el-input v-model="settingForm.description" minlength="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="settingSave">{{ $t('button.submit') }}</el-button>
          <el-button @click.native="settingFormVisible = false">{{ $t('button.cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog :title="formTitle" :visible.sync="formVisible" width="75%">
      <el-form ref="form" :model="form" :rules="formRules" label-width="170px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板名称" prop="name">
              <el-input v-model="form.name" minlength="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板标题" prop="title">
              <el-input v-model="form.title" minlength="1" />
            </el-form-item>
          </el-col>
         
          <el-col :span="12" >
            <el-form-item label="部门列表">
              <!-- <el-input v-model="deptId" @change="selectDept(deptId)" minlength="1" /> -->
              <!-- <treeselect v-model="deptId"  :options="allDept" @node-click="handleNodeClick"  placeholder="请选择所属部门" /> -->
              <el-select v-model="deptId" @change="selectDept(deptId)" multiple placeholder="请选择所属部门">
                <el-option v-for="item  in allDept" :key="item.id" :label="item.fullName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成员列表"  prop="WeChatUsers">
              <el-select v-model="WeChatUsers" @change="selectWeChatUser(WeChatUsers)" multiple placeholder="请选择">
                
                <el-option v-for="item  in allUserWeChat" :key="item.id" :label="item.dingDing" :value="item.dingDing">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>

       
          <el-col :span="24">
            <el-form-item label="模板内容" prop="content">
              <el-input type="textarea" v-model="form.content"  @focus="componentTips" minlength="1" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="description">
              <el-input v-model="form.description" minlength="1" />
            </el-form-item>
          </el-col>


        </el-row>
        <el-form-item>
          <el-button type="primary" @click="Save">{{ $t('button.submit') }}</el-button>

          <el-button @click.native="formVisible = false">{{ $t('button.cancel') }}</el-button>
        </el-form-item>


      </el-form>
    </el-dialog>
  </div>
</template>

<script src="./dingDing.js"></script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
</style>
